<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { showToast, showDialog } from "vant";
import { setDirectRate } from "@/api";
import { UserModule } from "@/store/modules/user";

export default defineComponent({
    emits: ["load"],
    setup(props, ctx) {
        const { t } = useI18n();
        const open = ref(false)
        const loading = ref(false)
        const formData: any = reactive({
            id: "",
            rate1: "",
            rate2: "",
            rate3: ""
        });
        const formData2: any = reactive({
            rate1: "",
            rate2: "",
            rate3: ""
        });
        const sendSetDirectRate = async (): Promise<void> => {
            try {
                if (Number(formData.rate1) < Number(formData2.rate1)) {
                    showToast(t("layout.Itratio2"));
                    return
                }
                if (Number(formData.rate2) < Number(formData2.rate2)) {
                    showToast(t("layout.Itratio2"));
                    return
                }
                if (Number(formData.rate3) < Number(formData2.rate3)) {
                    showToast(t("layout.Itratio2"));
                    return
                }
                loading.value = true
                await UserModule.verifyToken();
                const res = await setDirectRate(formData)
                if (res.data.code == 20) {
                    ctx.emit("load")
                    showDialog({ title: `${t("layout.success")}` })
                    open.value = false
                } else {
                    showToast(t("layout.Itratio"))
                }
            } catch (error) {
            }
            loading.value = false
        };
        const show = ({ Id, Rate1, Rate2, Rate3 }) => {
            open.value = true
            formData.id = Id
            formData.rate1 = Rate1
            formData.rate2 = Rate2
            formData.rate3 = Rate3
            formData2.rate1 = Rate1
            formData2.rate2 = Rate2
            formData2.rate3 = Rate3

        }
        return {
            open,
            loading,
            formData,
            show,
            sendSetDirectRate
        }
    }
})
</script>

<template>
    <van-popup v-model:show="open" closeable position="bottom" round>
        <div class="popup">
            <div class="title"><img src="@/assets/image/image4.png" alt="" srcset="">{{ $t('layout.Modifyscale') }}</div>
            <div class="info">
                <div class="cell">
                    <div class="label">{{ $t('layout.preliminaries') }}</div>
                    <van-field v-model="formData.rate1" type="number" :placeholder="$t('layout.Pleaseentertheratio')" />
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.semifinals') }}</div>
                    <van-field v-model="formData.rate2" type="number" :placeholder="$t('layout.Pleaseentertheratio')" />
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.finals') }}</div>
                    <van-field v-model="formData.rate3" type="number" :placeholder="$t('layout.Pleaseentertheratio')" />
                </div>
                <van-button type="primary" @click="sendSetDirectRate" :loading="loading">{{ $t('layout.confirm')
                }}</van-button>
            </div>
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
.popup {
    background: #0BA662;

    .title {
        position: relative;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 55px;
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;

        img {
            position: absolute;
            left: 20px;
            width: 22px;
            height: 16px;
        }
    }

    .info {
        padding: 20px 15px;
        background: #fff;
        border-radius: 10px 10px 0 0;
        overflow: hidden;

        .cell {
            margin-top: 20px;

            .name {
                display: flex;
                justify-content: space-between;

                span {
                    color: #0BA662;
                }
            }

            .van-field {
                margin-top: 12px;
                height: 45px;
                background: rgba(11, 166, 98, 0.06);
                border-radius: 6px;
                color: #0BA662;
                border: 1px solid #0BA662;

                &:deep(input) {
                    color: #0BA662;
                }
            }

            .text {
                margin-top: 8px;
                margin-bottom: 20px;
            }
        }



        .van-button {
            margin-top: 20px;
        }
    }
}
</style>
